<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>练习5：DOM操作</title>
	<style type="text/css">
		html,
		div,
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}

		a {
			cursor: pointer;
		}

		li {
			list-style: none;
			cursor: pointer;
		}

		fieldset {
			border: #000 1px dashed;
			width: 225px;
			height: 225px;
			padding: 10px;
			text-align: center;
			float: left;
			margin-left: 5px;
		}

		#cont_left {
			width: 300px;
			height: 500px;
			float: left;
		}

		#cont_right {
			float: left;
		}

		.newcss1 {
			background-color: yellowgreen;
		}
	</style>
</head>

<body>
	<div id="cont_left">
		<ul><img src="../assets/img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
			<ul id="menu1">
				<li onclick="showImg()"><img src="../assets/img/doc.gif">获取原始图片路径</li>
				<li onclick="getFruit()"><img src="../assets/img/doc.gif">获取我喜欢的水果</li>
			</ul>
		</ul>

		<ul><img src="../assets/img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
			<ul id="menu2">
				<li onclick="createImg()"><img src="../assets/img/doc.gif">创建图片</li>
				<li onclick="cloneImg()"><img src="../assets/img/doc.gif">克隆图片</li>
				<li onclick="changeImg()"><img src="../assets/img/doc.gif">改变图片</li>
				<li onclick="removeImg()"><img src="../assets/img/doc.gif">删除图片</li>
			</ul>
		</ul>

		<ul><img src="../assets/img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
			<ul id="menu3">
				<li onclick="changeCss1()"><img src="../assets/img/doc.gif">为原始图片加上行间样式</li>
				<li onclick="changeCss2()"><img src="../assets/img/doc.gif">为所有的fieldset加上内部样式</li>
			</ul>
		</ul>

	</div>
	<fieldset>
		<legend>原始图片</legend>
		<img id="fruit" src="../assets/img/fruit.jpg">
	</fieldset>
	<fieldset>
		<legend>图片路径</legend>
		<p id="msg1">在这里显示</p>
	</fieldset>
	<fieldset>
		<legend>选择你喜欢的水果</legend>
		<ul style="text-align: left;">
			<li>
				<input name="enjoy" type="checkbox" value="苹果" />苹果
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="葡萄" />葡萄
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
			</li>
			<li>
				<input name="enjoy" type="checkbox" value="西瓜" />西瓜
			</li>
		</ul>
		<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
	</fieldset>
	<fieldset>
		<legend>创建图片</legend>
		<div id="msg3"></div>
	</fieldset>
	<fieldset>
		<legend>克隆图片</legend>
		<div id="msg4"></div>
	</fieldset>
	<script>
		//菜单收缩与扩展
		function show(title) {
			let currentMenu = document.getElementById(title);
			let currentStatus = currentMenu.style.display;
			currentMenu.style.display = currentStatus == "" ? "none" : "";
		}
		//获取原始图片路径
		function showImg() {
			let img = document.getElementById("fruit");
			let msg = document.getElementById("msg1");
			msg.innerHTML = `图片路径：${img.src}`;
		}
		//获取喜欢的水果
		function getFruit() {
			let enjoy = document.getElementsByName("enjoy");
			let msg = document.getElementById("msg2");
			let enjoyStr = "";

			for (let i = 0; i < enjoy.length; i++) {
				if (enjoy[i].checked) {
					enjoyStr += `${enjoy[i].value} `;
				}
			}
			msg.innerHTML = `喜欢的水果: ${enjoyStr}`;
		}
		//创建图片
		function createImg() {
			var img = document.getElementById('existed');
			if (!img) {
				let img = document.createElement("img");
				img.id = "existed";
				img.src = "../assets/img/grape.jpg";
				document.getElementById("msg3").appendChild(img);
			}
		}
		//克隆图片
		function cloneImg() {
			let img = document.getElementById("fruit");
			var newImg = document.getElementById("cloned");
			if (!newImg) {
				let newImg = img.cloneNode(true);
				newImg.id = "cloned";
				document.getElementById("msg4").appendChild(newImg);
			}
		}
		//改变图片
		function changeImg() {
			let img = document.getElementById("fruit");
			img.src = "../assets/img/grape.jpg";
		}
		//删除图片
		function removeImg() {
			let img = document.getElementById("fruit");
			img.parentNode.removeChild(img);
		}
		//操作样式1
		function changeCss1() {
			let img = document.getElementById("fruit");
			img.style.border = "5px solid red";
		}
		//操作样式2
		function changeCss2() {
			let fieldset = document.getElementsByTagName("fieldset");
			for (let i = 0; i < fieldset.length; i++) {
				fieldset[i].style.backgroundColor = "yellow";
				fieldset[i].style.padding = "20px";
			}
		}
	</script>
</body>

</html>